<template>
	<u-popup class="popup" v-model="buyMask" :height="setup.height" closeable :mode="setup.mode"
		:border-radius="setup.radius" @close="closeMask()">
		<!-- 商品 -->
		<view class="goods-box bottom">
			<view class="goods-header">
				<view class="goods-img">
					<u-image width="200rpx" border-radius="20" class="uimage" height="200rpx"
						:src="goodsDetail.main_image"></u-image>
				</view>
				<view class="goods-skus">
					<view class="fs-32">{{goodsDetail.goods_name}}</view>
					<!-- 正常商品的价格 -->
					<div class="goods-price mb-1">
						<span>
							￥
							<span class="goods-price-bigshow">{{curSku.price ||goodsDetail.day_amount}}</span>/日
						</span>
					</div>
					<view class="goods-check-skus">
						已选
						<span class="goods-check-skus-name" v-if="curSku.key">
							{{curSku.key.join(' ')}}
							<span>，{{num}}个</span>
						</span>
					</view>
					<view class="goods-check-skus">
						库存
						<span class="goods-check-skus-name">
							<span>{{curSku.stock}}</span>
						</span>
					</view>
				</view>
			</view>
			<!-- 商品信息 -->
			<scroll-view class="goods-skus-box" :scroll-y="true">
				<!-- 规格 -->
				<view class="goods-skus-view" :key="specIndex" v-for="(spec, specIndex) in formatList">
					<view class="skus-view-list">
						<view class="view-class-title">{{ spec.name }}</view>

						<!-- 正常逻辑 循环出sku -->
						<view :class="{ active: spec.activeIndex === spec_index }" class="skus-view-item"
							v-for="(spec_val, spec_index) in spec.item2" :key="spec_index" @click="handleClickSpec(spec, spec_index)">
							{{ spec_val }}
						</view>
					</view>
				</view>

				<!-- 数量 -->
				<view class="goods-skus-number flex flex-a-c flex-j-sb">
					<view class="view-class-title">租赁数量</view>
					<uni-number-box class="uNumber" :min="1" :max="999" v-model="num"></uni-number-box>
				</view>
			</scroll-view>
			<view class="flex align-center fs-28 border-top py-2">
				总租金：
				<view class="goods-price">
					<span class="fs-32">￥{{Number(totalRentMoney).toFixed(2)}}</span>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="btns" v-if="goodsDetail.quantity !== 0">
				<view class="box-btn buy" @click="addToCartOrBuy('buy')">立即租赁</view>
			</view>
		</view>
	</u-popup>
</template>
<script>
	import setup from './popup';
	import uniNumberBox from '@/components/uni-number-box'
	export default {
		components: {
			uniNumberBox
		},
		props: {
			wholesaleList: {
				type: null,
				default: false
			},
			isGroup: {
				type: Boolean,
				default: false
			},
			goodsDetail: {
				default: '',
				type: null
			},
			selectedSku: {
				default: '',
				type: null
			},
			goodsSpec: {
				default: '',
				type: null
			},
			addr: {
				default: '',
				type: null
			},
			pointDetail: {
				default: '',
				type: null
			}
		},
		data() {
			return {
				setup,
				num: this.wholesaleList && this.wholesaleList.length > 0 ? this.wholesaleList[0].num : 1,

				selectName: '', //选中商品的昵称
				selectSkuList: '', //选中商铺sku,
				selectedSpecImg: '', //选中的图片路径
				buyType: '', //用于存储促销，拼团等活动类型
				parentOrder: '', //父级拼团活动的数据 - 如果是团员则有数据
				formatList: [],
				currentSelected: ['', ''],
				skuList: '',
				isClose: false, //是否可以点击遮罩关闭
				buyMask: false,
				curSku: {},
				skus: [],
				specs: {}
			};
		},

		computed: {
			totalRentMoney() {
				return this.specs.price * this.specs.dayNum * this.num || 0
			},
			wholesalePrice(key) {
				return this.wholesaleList.length ?
					this.wholesaleList.map(item => {
						return item.price;
					}) : [];
			},
			wholesaleNum(key) {
				return this.wholesaleList.length ?
					this.wholesaleList.map(item => {
						return item.num;
					}) : [];
			}
		},
		watch: {
			'formatList': {
				handler(val) {
					const curKey = val.map(i => i.item[i.activeIndex])
					const skus = JSON.parse(JSON.stringify(this.skus))
					this.curSku = skus.find(sku => this.areElementsEqual(sku.key, curKey))
					this.specs = this.curSku
					this.specs.dayNum = this.curSku.specs['租期']
					this.curSku.price = Number(this.curSku.price / this.specs.dayNum).toFixed(2)
					console.log(this.curSku)
				},
				deep: true
			},
			num(val) {
				val == 0 ? this.num = 1 : ''
				if (val) {

					//超过库存后修改回库存
					if (val > this.goodsDetail.quantity) {
						this.$nextTick(function() {
							this.num = this.goodsDetail.quantity;
						});
					}
				}
			},
			buyType: {
				handler(val) {
					if (val) {
						this.buyType = val;
					}
				},
				immediate: true
			},
			selectSkuList: {
				handler(val, oldval) {
					this.$emit('changed', val);
				},
				deep: true
			},
			'goodsDetail.quantity': {
				handler(val) {
					if (val == 0) {
						uni.showToast({
							title: '商品已售罄',
							duration: 2000,
							icon: 'none'
						})
						this.num = 1;
					}
				}
			}
		},

		methods: {
			areElementsEqual(arr1, arr2) {
				// 先判断长度是否相同
				if (arr1.length !== arr2.length) {
					return false;
				}

				// 创建数组副本并排序（避免修改原数组）
				const sortedArr1 = [...arr1].sort();
				const sortedArr2 = [...arr2].sort();

				// 比较排序后的数组
				for (let i = 0; i < sortedArr1.length; i++) {
					// 对于基本类型直接比较，对于对象等复杂类型需要额外处理
					if (String(sortedArr1[i]) !== String(sortedArr2[i])) {
						return false;
					}
				}

				return true;
			},
			show() {
				// const obj = this.goodsDetail.sku.skus.find(item => String(item.id) === String(this.specId))
				// this.specs = obj
				// this.specs.dayNum = obj.specs['租期']

				this.formatList = this.goodsDetail.sku_attr.map(sku => {
					sku.item2 = JSON.parse(JSON.stringify(sku.item))
					if (sku.name === '租期') {
						sku.item2 = sku.item2.map(i => i + '天')
					}
					return {
						name: sku.name,
						item: sku.item,
						item2: sku.item2,
						activeIndex: 0
					}
				})
				this.skus = this.goodsDetail.sku.skus.map(item => {
					return {
						...item,
						key: Object.values(item.specs)
					}
				})
				this.buyMask = true
			},
			numCheck(val) {
				if (this.wholesaleList && this.wholesaleList.length > 0) {
					if (this.num <= this.wholesaleList[0].num) {
						uni.showToast({
							title: '批发商品购买数量不能小于起批数量!',
							duration: 2000,
							icon: 'none'
						});
						this.num = this.wholesaleList[0].num;
					}
				}
			},
			closeMask() {
				this.$emit('closeBuy', false);
			},

			/**点击规格 */
			handleClickSpec(item, rindex) {
				item.activeIndex = rindex
			},

			/**
			 * 直接购买
			 */
			buy(data) {

			},

			/**
			 * 添加到购物车或购买
			 */
			addToCartOrBuy(val) {
				if (!this.curSku.id) {
					uni.showToast({
						title: '请选择规格商品',
						icon: 'none'
					});
					return;
				}

				console.log('curSku----', this.curSku)
				uni.navigateTo({
					url: `/pages/order/submitOrder?goodsId=${this.goodsDetail.id}&specId=${this.curSku.id}&num=${this.num}`
				});
			},

		},

		mounted() {
			console.log("goodsDetail", this.goodsDetail)
		}
	};
</script>
<style lang="scss" scoped>
	@import './popup.scss';

	.price-row {
		text-align: center;
	}

	.buy {
		background-image: linear-gradient(135deg, #ffba0d, #ffc30d 69%, #ffcf0d);
		box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
	}

	.card {
		background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
		box-shadow: 0 2px 6px 0 rgba(255, 65, 66, 0.2);
	}

	::v-deep.u-icon-plus,
	.u-icon-minus,
	.u-icon-disabled {
		height: 30rpx !important;
		background: #fff !important;
	}

	.goods-skus-number {
		justify-content: space-between;
		display: flex;

		>.view-class-title {
			flex: 8;
		}

		>.view-class-input {
			flex: 1;
		}
	}

	::v-deep .uni-scroll-view {
		overflow: hidden !important;
	}

	.active {
		background: $price-light-color !important;
		border: 2rpx solid $price-color;
		font-weight: bold;
		color: $price-color !important;
		box-sizing: border-box;
	}

	.goods-skus-box {
		overflow-y: auto;
		height: 500rpx;
		// #ifdef MP-WEIXIN
		height: 480rpx;
		// #endif
		margin-bottom: 10rpx;
	}

	.soldout {
		margin: 20rpx 0;
	}

	.goods-skus-view {
		overflow: hidden;

		.skus-view-list {
			>.skus-view-item {
				flex: 1;
				padding: 0 36rpx;

				overflow: hidden;
				height: 60rpx;
				line-height: 60rpx;
				float: left;
				text-align: center;
				margin-left: 24rpx;
				margin-bottom: 20rpx;
				font-size: 22rpx;
				color: #262626;
				background: #f2f2f2;
				border-radius: 30rpx;
			}
		}
	}

	.wholesale-item {
		color: #999 !important;
		font-size: 24rpx;
		margin: 0 20rpx;
		display: flex;
		justify-content: center;
	}

	.goods-header {
		height: 200rpx;
		display: flex;
		margin-bottom: 36rpx;
	}

	.goods-box {
		padding: 50rpx 36rpx 0 36rpx;
	}

	.goods-skus {
		padding: 0 20rpx;
	}

	.goods-price {
		color: $price-color;
		// line-height: 80rpx;
		margin-right: 20rpx;

		>* {
			color: $price-color;
			// line-height: 80rpx;
		}
	}

	.promotion-box {
		line-height: 1;
		display: flex;
		align-items: center;
		text-decoration: line-through;
		color: #999;
		margin-left: 10rpx;

		::v-deep span {
			font-size: 30rpx;
		}
	}

	.promotion {
		font-size: 30rpx;
	}

	.goods-price-promotionShow {
		font-size: 48rpx;
	}

	.goods-check-skus {
		font-size: 24rpx;
		color: #999;

		>.goods-check-skus-name {
			margin-left: 4rpx;
		}

		>span {
			color: #333;
		}
	}
</style>